import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Resetphone.css'
import { Form, Input, Button } from 'antd-mobile';

export default function Resetphone() {
    const navigate = useNavigate()
    const [user, setUser] = useState({
        img: '',
        username: '用户名',
        phone: '13888888888',
        concern: '--',
        collect: '--',
        score: '--',
        coupon: '--'
    })
    return (
        <div className='resetphone'>
            <div className='resetphone-header'>
                <h1>更换手机号码</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="resetphone-content">
                <p>更换手机号码后，下次登录使用新的手机号码，当前手机号码 <span>{user.phone}</span></p>
                <div className="form">
                    <Form>
                        <Form.Item label='手机号'>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label='短信验证码' extra={<a>发送验证码</a>}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                    </Form>
                </div>
                <div className="btn">
                    <Button color='primary'
                        style={{ width: '90%', marginLeft: '5%', marginTop: '20px' }}
                        onClick={() => { navigate(-1) }}
                    >确认</Button>
                </div>
            </div>
        </div>
    )
}
